{extend name="public/base" /}
{block name="head"}
<style type="text/css">
#fuyun-app{color:#666;}
.image{width: 120px;height: 90px;}
.market_price{text-decoration: line-through;}
.layui-table th,.layui-table td{text-align: center;}
.layui-table td.goodsInfo{text-align: left;}
</style>
{/block}
{block name="body"}
<div id="fuyun-app" class="fuyun-app">
  <div class="search-box">
    <div class="fuyun-title">
      <h5>筛选条件</h5>
    </div>
    <div class="search-content">
      <form class="layui-form" action="{:Url('index')}" method="get">
        <div class="fuyun-form-item layui-inline">
          <label>配置值</label>
          <input class="layui-input" type="text" name="config_key" placeholder="输入配置值" value="{$Request.param.config_key}">
        </div>

        <div class="fuyun-form-item layui-inline" style="padding-top:18px;">
          <button class="layui-btn layui-btn-normal">搜索</button>
        </div>
      </form>
    </div>
  </div>

  <div class="content-box ">
    <div class="fuyun-title">
      <h5>配置列表</h5>
      <a href="{:Url('create')}" class="layui-btn fuyun-add-btn layui-btn-small layui-btn-normal add"><i class="fa fa-plus-square margin-right-5"></i>添加配置</a>
    </div>
    <div class="main-box">
      <div class="layui-form">
        <table class="layui-table layui-form">
          <thead>
            <tr>
              <th width="10%">备注</th>
              <th width="10%">标识</th>
              <th width="10%">配置值</th>
              <th width="5%">类型</th>
              <th width="8%">操作</th>
            </tr> 
          </thead>
          <tbody>
            {volist name="list['data']" id="vo"}
              <tr data-id="{$vo.id}">
                <td>{$vo.remark}</td>
                <td>{$vo.config_key}</td>
                <td>
                  <?php if(isset($vo['value'])):?>
                    {$vo.value}
                  <?php else: ?>
                    {if condition="$vo['config_type']=='text'"}
                      {$vo.config_value}
                    {elseif condition="$vo['config_type']=='image'"}
                      <img class='image' src="{$vo.config_value}" >
                    {else}
                      点编辑查看详细内容
                    {/if}
                  <?php endif?>
                </td>
                <td>{$vo.config_type}</td>

                <td>
                  <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-normal layui-btn-small" href="{:Url('update',['id'=>$vo['id']])}">编辑</a>
                    <button class="layui-btn fuyun-btn-del layui-btn-small btn-del-id" data-url="{:Url('deleteAll')}" data-confirm="确定删除该配置项吗？" data-successtip="删除成功！" data-id="<?=$vo['id']?>" ><i class="fa fa-close margin-right-5"></i>删除</button>
                  </div>
                </td>
              </tr>
            {/volist}
          </tbody>
        </table>
      </div>
      <div class="page-box">
        <fuyun-page v-if="<?=ceil($list['totalRow']/$list['pageSize'])?> > 1"
          :pagesize="<?=$list['pageSize']?>" 
          :total = "<?=$list['totalRow']?>"
          :current-page = {$list['curPage']}
        ></fuyun-page>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    layui.use([ 'layer','form'], function(){
      var layer = layui.layer;
      var form = layui.form();
      //全选
      form.on('checkbox(allChoose)', function(data){
          var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
          child.each(function(index, item){
              item.checked = data.elem.checked;
          });
          form.render('checkbox');
      });

        form.on('submit(formDemo)', function(data){
			    layer.msg(JSON.stringify(data.field));
			    return false;
			  });
    });

    fuyun.components(['page'],{
      el:"#fuyun-app",
      data:{
        labelPosition: 'top',
      },
    });

    //单个上下架
    function changeStatus(id, status){
      requestStatus([id], status);
    }

    //批量上下架
    function changeAllStatus(status){
      var ids = [];
      $($("input[name='id[]']")).each(function(){
          if( this.checked ){
              ids.push($(this).val());
          }
      });
      requestStatus(ids, status);
      console.log(ids);
    }

    function requestStatus(ids, status){
      var confirm = status==1?"是否确定上架？":"是否确定下架？";
      var layerDelIndex = layer.confirm(confirm, {
        btn: ['是','否'] //按钮
      }, function(){
        $.ajax({
          type:'post',
          url: "{:Url('changeStatus')}",
          data:{'id':ids,'status':status},
          dataType:'json',
          success: function(data){
            if(data['status']==200){
              changeStatusIcon(ids, status);
              layer.msg(data['msg']);
              layer.close(layerDelIndex);
            }else{
              layer.msg(data['msg']);
            }

          }
        });
      }, function(){
        return;
      });
    }

    //改变状态图标
    function changeStatusIcon(ids, status){
      var icon_class = status == 1 ? 'el-icon-circle-check color-success':'el-icon-circle-cross color-danger';
      ids.map(function(id){
        $("td[data-status-"+id+"] i").attr("class", icon_class);
        console.log(id);
      });
    }
    

</script>

{/block}
